<template>
  <div style="width:100%;height:600px;background-color: #2c3e50">

    <dv-flyline-chart-enhanced :config="config" style="width:100%;height:100%;" />

  </div>

</template>
<script>
  export default {
    data:function(){
      return{
        config:{
          lineWidth:1,
          // orbitColor:[2],
          flylineColor:'#ffde93',
          k:0,
          curvature:4,
          flylineRadius:100,
          duration:[20,30],
          relative:true,//使用相对坐标

          points: [
            {
              name: 'SVC负载均衡',
              coordinate: [0.55, 0.35],
              halo: {
                show: true,
              },
              icon: {
                src: '/src/mapCenterPoint.png',
                width: 30,
                height: 30
              },
              text: {
                show: true
              }
            },

            {
              name: 'nodeport1',
              coordinate: [0.25, 0.2]
            },
            {
              name: 'nodeport2',
              coordinate: [0.25, 0.3]
            },
            {
              name: 'nodeport3',
              coordinate: [0.25, 0.4]
            },
            {
              name: 'nodeport4',
              coordinate: [0.25, 0.5]
            },
            {
              name: '虚拟机',
              coordinate: [0.70, 0.35],
              halo: {
                show: true,
                color: '#8378ea'
              },
              icon: {
                src: '/src/xnj.png',
                width: 30,
                height: 30
              },

            },
            {
              name: '中台网关',
              coordinate: [0.40, 0.35],
              halo: {
                show: true,
                color: '#37a2da'
              }
            },

            {
              name: 'pm1',
              coordinate: [0.86, 0.32]
            },
            {
              name: 'pm2',
              coordinate: [0.86, 0.40]
            },
            {
              name: 'pm3',
              coordinate: [0.86, 0.48]
            },
            {
              name: '实例1',
              coordinate: [0.60, 0.52]
            },
            {
              name: '实例2',
              coordinate: [0.56, 0.52]
            },
            {
              name: '实例3',
              coordinate: [0.52, 0.52]
            },
            {
              name: '实例4',
              coordinate: [0.48, 0.52]
            },
            //流量入口F5
            {
              name: '负载F5',
              coordinate: [0.07, 0.35],
              halo: {
                show: true,
                color: '#6a5acd'
              },
              icon: {
                src: '/src/mapCenterPoint.png',
                width: 30,
                height: 30
              },
            }

          ],
          lines: [

            {
              source: '虚拟机',
              target: 'SVC负载均衡',
              color: '#ff63ff',
              width: 2
            },
            {
              source: '中台网关',
              target: 'SVC负载均衡',
              color: '#fb7293',
              width: 2
            },

            {
              source: 'nodeport1',
              target: '中台网关',
              color: '#37a2da'
            },
            {
              source: 'nodeport2',
              target: '中台网关',
              // color: '#37a2da'
            },
            {
              source: 'nodeport3',
              target: '中台网关',
              color: '#8378ea'
            },
            {
              source: 'nodeport4',
              target: '中台网关',
              color: '#3cb371'
            },
            {
              source: 'pm2',
              target: '虚拟机',
              color: '#8378ea'
            },
            {
              source: 'pm3',
              target: '虚拟机',
              color: '#8378ea'
            },
            {
              source: 'pm1',
              target: '虚拟机',
              color: '#8378ea'
            },
            // {
            //     source: '实例1',
            //     target: 'SVC负载均衡'
            // },
            {
              source: 'SVC负载均衡',
              target: '实例1'
            },
            {
              source: 'SVC负载均衡',
              target: '实例2'
            },
            {
              source: 'SVC负载均衡',
              target: '实例3'
            },
            {
              source: 'SVC负载均衡',
              target: '实例4'
            },

            {
              source: '负载F5',
              target: 'nodeport1',
              color: '#37a2da'
            },
            {
              source: '负载F5',
              target: 'nodeport2',
              // color: '#37a2da'
            },
            {
              source: '负载F5',
              target: 'nodeport3',
              color: '#8378ea'
            },
            {
              source: '负载F5',
              target: 'nodeport4',
              color: '#3cb371'
            },


          ],
          icon: {
            show: true,
            src: '/src/mapPoint.png'
          },
          text: {
            show: true,
          },
          k: -0.1,


        }

      }
    }

  }
</script>
